<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/header.css">
    <link rel="stylesheet" href="../css/footer.css">
    <link rel="stylesheet" href="../css/detail.css">
    <title>Document</title>
</head>

<body>
    <!-- 页眉 -->
    <header></header>

    <!-- 主体 -->
    <div id="detail" class="container">

        <!-- 面包屑 -->
        <div class="bread">
            <a href="../index.html">首页</a>
            <span class="bread-title">&gt;&nbsp;全羊毛高领打底针织羊毛衫</span>
        </div>

        <!-- 详情页主体 -->
        <div class="detail">



        </div>
        <script type="text/html" id="detailTemplate">
            <!-- 购买选项编辑 -->
            <div class="editor clear">
                <div class="main">
                    <div class="goodsPic clear">
                        <p>
                             <img src="{{image}}" alt="Image To Zoom" class="zoom">
                        </p>
                        <ul>
                            {{each photo item}}
                            <li >
                                <img src="{{item.url}}" alt="">
                            </li>
                            {{/each}}
                        </ul>
                    </div>
                    <ul class="policy">
                        <li>7天无忧退货</li>
                        <li>先行赔付</li>
                        <li>超时赔偿</li>
                        <li>顺丰包邮</li>
                    </ul>
                </div>
                <!-- 选择款式、尺码 -->
                <div class="panel">
                    <h1>{{title}}</h1>
                    <p>舒适休闲，款式百搭</p>
                    <!-- 制造商 -->
                    <span class="manufacturer"><i></i> Mackage制造商</span>
                    <hr>
                    <!-- 价格条 -->
                    <div class="price clear">
                        <span>售价</span>
                        <div>
                            <span class="money">
                                ￥
                                <i>{{price}}</i>
                            </span>
                            <span class="duration">
                                生产周期：
                                <span>15</span>
                                天
                            </span>
                        </div>
                    </div>
                    <!-- 颜色 -->
                    <div class="style clear">
                        <span>颜色</span>
                        <ul>
                            <li class="active">
                                <img src="http://bfs.biyao.com/group1/M00/AA/3C/rBACW12eiwSAMOwtAAPqwOH3gm4749_640x640.jpg"
                                    alt="">
                                <em></em>
                                <i></i>
                                <div>金月兰</div>
                            </li>
                            <li>
                                <img src="http://bfs.biyao.com/group1/M00/AA/3C/rBACW12eixeAV090AAS2O9hLlfA642_640x640.jpg"
                                    alt="">
                                <em></em>
                                <i></i>
                                <div>浅花灰</div>
                            </li>
                            <li>
                                <img src="http://bfs.biyao.com/group1/M00/A8/4D/rBACVF2eix2AI_2qAAP3yUreqAI916_640x640.jpg"
                                    alt="">
                                <em></em>
                                <i></i>
                                <div>新金粉</div>
                            </li>
                            <li>
                                <img src="http://bfs.biyao.com/group1/M00/A9/B7/rBACYV2eixKARo6jAAOgPpsOUEo942_640x640.jpg"
                                    alt="">
                                <em></em>
                                <i></i>
                                <div>大红</div>
                            </li>
                            <li>
                                <img src="http://bfs.biyao.com/group1/M00/AA/3C/rBACW12eiySANwYoAAMA7iwiZSk797_640x640.jpg"
                                    alt="">
                                <em></em>
                                <i></i>
                                <div>黑色</div>
                            </li>
                            <li>
                                <img src="http://bfs.biyao.com/group1/M00/A8/4D/rBACVF2eiwyAR8PWAAQnKSACrVc760_640x640.jpg"
                                    alt="">
                                <em></em>
                                <i></i>
                                <div>金光驼</div>
                            </li>
                        </ul>
                    </div>
                    <!-- 尺码 -->
                    <div class="specs clear">
                        <span>尺码</span>
                        <ul>
                            <li>
                                M
                                <em></em>
                            </li>
                            <li class="active">
                                L
                                <em></em>
                            </li>
                            <li>
                                XL
                                <em></em>
                            </li>
                        </ul>
                    </div>
                    <!-- 数量 -->
                    <div class="num clear">
                        <span>数量</span>
                        <ul>
                            <input type="button" value="-" class="reduce">
                            <input type="text" value="1" class="inputCount">
                            <input type="button" value="+" class="add">
                        </ul>
                    </div>
                    <!-- 加入购物车 -->
                    <button class="addcart">加入购物车</button>
                </div>
            </div>

            <!-- 详情介绍图片 -->
            <div class="introImg">
                {{each descContentList item}}
                    {{if item.image}}
                        <img src="{{item.image.url}}" alt="" >
                    {{/if}}
                {{/each}}
            </div>

        </script>
    </div>

    <!-- 加入提示 -->
    <div class="addSuccess">加入成功</div>

    <!-- 页脚 -->
    <foot></foot>

</body>
<!-- <script src="../lib/jquery/jquery.js"></script>
<script>
    // 导入页眉页脚
    const header = $('header')
    header.load('./header.html')
    const footer = $('foot')
    footer.load('./footer.html')
</script> -->

<script src="/lib/requirejs/require.js" data-main="/js/detail"></script>

</html>